<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${painting.title}_可观艺术网</title>
<meta name="Keywords" content="${painting.title},作品详情,当代画家作品鉴赏,可观艺术" />
<meta name="Description" content="${painting.title}鉴赏,大图,高清图片鉴赏" />
<link href="../style/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>

<style type="text/css">
	.outer{width:100%;background-color: #666666;margin-top: 10px;}
	.main{ width:960px; margin:0 auto; text-align:center;}
	.container{position:relative;}
	.preImg{position:absolute; left:-24px;top:250px; }
	.nextImg{position:absolute; right:-24px; top:250px;}
	
	#paintingDetailDiv{display:none;width:343px;height:193px;z-index:410;position:absolute;top:50%;padding: 10px 20px 10px 20px;background: url("../images/background_painting.png") no-repeat;}
	#paintingDetailDiv p{margin: 0px;font-family: 宋体;font-size: 12px;clear: both;}
	
	.imgBox{ width:910px; overflow:hidden;margin:0 auto; padding-top: 20px;padding-bottom: 20px; }
	
	.imgList{ overflow:hidden; position:relative; width:960px; height:110px; background:#FFF;margin:0 auto;}
	.preBtn{ width:16px; height:90px;position:absolute; left:0px; padding-top:45px;background:#FFF;}
	.nextBtn{ width:16px; height:90px;position:absolute; right:0px; padding-top:45px;background:#FFF;}
	.imgsBox{height:92px; position:absolute; left:17px; top:0px; text-align:left;overflow:hidden;margin-top: 10px;}
	.cur_img_1{width: 76px;height: 90px;float:left;margin-right:15px;border:1px solid #ccc;cursor: pointer}
	.cur_img{width: 76px;height: 90px;float:left;margin-right:15px;border:1px solid #ff9900;cursor: pointer}
	.cur_img_1:hover{border:1px solid #ff9900;}
	
	.arrow_painting {font-family: "幼圆";font-size: 20px;text-transform: none;color: #b1b1b1;font-weight: bold;}
	
</style>

<script type="text/javascript">

var paintings = ${requestScope.ajaxData};

var showDetailFlag = true;

/**初始化小图列表 ***/
function init(){

	var len = paintings.length;
	var imgsBoxDiv = document.getElementById("imgsBoxDiv");
	var htmlStr = "";

 	for(var i= 0;i<len; i++){
 		 var imagepath = paintings[i].smallImagePath;
 		 var imagepath2 = paintings[i].originalImagePath;

 		 var current_paintingId = '${painting.id}';
 		
 	 		 if(paintings[i].id == current_paintingId){
 	 			htmlStr += '<div class="cur_img"><div name="'+imagepath2 +'" style="margin-top:8px;margin-left:8px;width: 60px;height: 74px;background-position: center center;background-image: url('+imagepath+');"></div></div>';
 	 			init_weibo(paintings[i].title,imagepath2);
 	 		 }else{
 	 			htmlStr += '<div class="cur_img_1"><div name="'+imagepath2 +'" style="margin-top:8px;margin-left:8px;width: 60px;height: 74px;background-position: center center;background-image: url('+imagepath+');"></div></div>';
 	 		 }
 	}
 	
 	imgsBoxDiv.innerHTML = htmlStr ;
}

/** 显示作品详情 **/
function showDetail(){

	if(showDetailFlag){
		
	 	var divId = document.getElementById("paintingDetailDiv");  
	 	divId.style.display = "block";

	 	/***屏幕绝对居中 begin ***/
	 	var myWidth = 0, myHeight = 0;
	 	if (typeof (window.innerWidth) == "number") {
	 	        myWidth = window.innerWidth;
	 	        myHeight = window.innerHeight;
	 	    } else {
	 	        if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
	 	            myWidth = document.documentElement.clientWidth;
	 	            myHeight = document.documentElement.clientHeight;
	 	        } else {
	 	            if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
	 	                myWidth = document.body.clientWidth;
	 	                myHeight = document.body.clientHeight;
	 	            }
	 	        }
	 	      }
	 	/***屏幕绝对居中 end ***/
	 	
	 	var v_left =(myWidth - divId.clientWidth) / 2+"px";
	 	var v_top =(myHeight - divId.clientHeight) / 2 + document.documentElement.scrollTop+"px";

	 	divId.style.left = v_left;
	 	//divId.style.top = v_top;
	 	divId.style.top = "270px";

	 	var imageWidth = $("#paintingImage").attr("width");
	 	if(divId.clientWidth >= imageWidth ){
			$("#paintingDetailDiv").live("mouseout",function(){
				document.getElementById('paintingDetailDiv').style.display="none";
			});
	 	}
	}
}

/*** 隐藏作品详情 *****/
function hiddenDetail(){
	document.getElementById('paintingDetailDiv').style.display="none";
	showDetailFlag = true;
}

/**鼠标在详情窗口上时隐藏浮层动作**/
function hiddenSmallDiv(){

	document.getElementById('paintingDetailDiv').style.display="none";
	showDetailFlag = false;
}

/**鼠标在详情窗口上时显示浮层动作**/
function showSmallDiv(){

	if(showDetailFlag){
	 	var divId = document.getElementById("paintingDetailDiv");  
	 	divId.style.display = "block";
	}
}

/**请求作品详细信息**/
function requestDetailOfPainting(next_id){

 	$("#painting_id").val(paintings[next_id].id);
 	$("#painter_id").val(paintings[next_id].painterId);
 	$("#title").html(paintings[next_id].title);
 	$("#painter_name").html(paintings[next_id].painter_name);
 	$("#caizhi").html(paintings[next_id].caizhi);
 	$("#width").html(paintings[next_id].width);
 	$("#height").html(paintings[next_id].height);
 	
 	if(paintings[next_id].onSaleFlag ==2 ){
		var priceHtml = "售价：￥<strong>"+paintings[next_id].price+"</strong>元";
		$("#price").html(priceHtml);
		$("#buyImage").html('<img border="0" src="../images/an2.png" width="77" height="23" style="cursor: pointer;vertical-align:bottom;" onclick="onbuy();"/>&nbsp;');
 	}else{
 		$("#price").html("");
 		$("#buyImage").html("");
 	}

 	var imagepath2 = paintings[next_id].originalImagePath;

 	init_weibo(paintings[next_id].title,imagepath2);
}

function onbuy(){

	var onSaleFlag = '${painting.onSaleFlag}';
	if( onSaleFlag != '2'){
		alert("该作品仅展示，不能购买。");
		return false;
	}else{
		var gId = $("#gId").val();
		if(gId == ""){
			alert("该作品仅展示，不能购买。");
		}
		$.ajax( {
			type : "POST",
			url : "${ctx}/customer/order!checkL.do?time="+new Date(),
			timeout : 6000,
			async : false, 
			success : function(data, textStatus) {
				if(data  == "0000"){
					$("#orderForm").submit();
				}
				else{
					var link_url = "${ctx}/user/login_fragment.jsp";
					var width = 383;
					var height = 265;
					var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
					createPopupDiv("_link_div_win",width,height,content);
				}
			}
		});
	}
}

/** 摆设效果  ***/
function showEffect(){
	var pId = $("#painting_id").val();
	window.location.href = "${ctx}/front/backgroundAction!showEffect.do?id="+pId;
}

/** 画家详情  ***/
function showPainterDetail(){
	var painterId = $("#painter_id").val();
	if(painterId == ""){
		return false;
	}
	window.location.href = "${ctx}/front/painterAction!painterDetail.do?id="+painterId;
}

/**** 距滚动条顶部距离 *******/
function getScrollTop(){
	var scrollPos; 
	if (typeof window.pageYOffset != 'undefined') { 
	   scrollPos = window.pageYOffset; 
	} 
	else if (typeof document.compatMode != 'undefined' && 
	     document.compatMode != 'BackCompat') { 
	   scrollPos = document.documentElement.scrollTop; 
	} 
	else if (typeof document.body != 'undefined') { 
	   scrollPos = document.body.scrollTop; 
	}
	return  scrollPos;
}

function createPopupDiv(divId,width,height,content){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "block";
	divWindow.style.width = width +"px";
	divWindow.style.height  = height + "px" ;
	var scrollTop = getScrollTop() ;
	divWindow.style.left = (document.body.offsetWidth - width)/2 + document.body.scrollLeft + "px";
	divWindow.style.top  = (window.screen.availHeight - height) / 2 + scrollTop + "px";
	divWindow.innerHTML = content;
}

function closePopupDiv(divId){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "none";
}

</script>

</head>

<body>

<div id="_link_div_win" style="display:none;z-index:1001;margin:auto;position: absolute;font-size: 12px;"></div>

<%@include file="/commons/head.jsp"%>

<div class="outer">
<!--begin main-->
<div class="main">
	<!-- begin container-->
		<div class="container">
			<div class="preImg"><img border="0" src="../images/arrow_left.png"/></div>
			<div class="nextImg"><img border="0" src="../images/arrow_right.png"/></div> 
			<div class="imgBox"><img id="paintingImage" src="${painting.originalImagePath }" border="0" onmouseover="showDetail()" onmouseout="hiddenDetail()"/></div>
		</div>
	<!--end container-->
</div>
<!--end main-->
</div>

<div style="padding-top: 10px;background-color: #fff">
<!-- begin imgList-->
	<div class="imgList">
		<div class="preBtn"><span class="arrow_painting">&lt;</span></div>
		<div class="imgsBox"  id="imgsBoxDiv"></div>
		<div class="nextBtn"><span class="arrow_painting">&gt;</span></div>
	</div>
<!--end imgList-->
</div>

<div id="paintingDetailDiv" onmouseover="showSmallDiv();">
	<div style="position: absolute;right: 28px;top: 20px;color: #d20600;font-family: 幼圆;font-size: 18px;font-weight: bold;"><span id="price"><c:if test="${painting.price > 0 }"> 售价￥<strong><fmt:formatNumber value="${painting.price }" pattern="0"/></strong>元</c:if></span></div>
	<p style="padding-top: 16px;">作品：<span id="title">${painting.title}</span></p>
	<p style="padding-top: 12px;">作者：<span id="painter_name">${painting.painter.name}</span></p>
	<p style="padding-top: 12px;">材质：<span id="caizhi">${painting.caiZhi}</span>&nbsp;&nbsp;&nbsp;尺寸：<span id="width">${painting.width}</span>*<span id="height">${painting.hight}</span>cm</p>
	<%-- <p style="padding-top: 12px;">提供方：<span id="provider">${painting.entryPerson.username}</span></p> --%>
	<p align="left"  style="padding-top: 12px;">
		<span id="buyImage">
		<c:if test="${painting.price > 0 }"> 
			<img border="0" src="../images/an2.png" width="77" height="23" style="cursor: pointer;vertical-align:bottom;" onclick="onbuy();" />
		</c:if>
		</span>
		<img border="0" src="../images/an3.png" width="77" height="23" onclick="showEffect();" style="cursor: pointer;vertical-align:bottom;"/>
		&nbsp;&nbsp;<span style="font-family: 幼圆;font-size: 15px;vertical-align: baseline;font-weight: bold;text-decoration: underline;cursor: pointer;" onclick="showPainterDetail()">原创作者</span>
		&nbsp;&nbsp;<span style="font-family: 幼圆;font-size: 15px;vertical-align: baseline;font-weight: bold;text-decoration: underline;">作品认证</span>
	</p>
	<p style="padding-top: 12px;">作品分享：
		<a title="分享至新浪微博" onclick="javascript:window.open(_sina,'_blank');" href="javascript:void(0);"><img border="0" src="../images/sina.jpg" width="25" height="23" style="cursor: pointer"/></a>
		<a title="分享至腾讯微博" onclick="javascript:window.open(_tencent,'_blank');" href="javascript:void(0);"><img border="0" src="../images/tencent.jpg" width="25" height="23" style="cursor: pointer"/></a>
		<a title="分享至搜狐微博" onclick="javascript:window.open(_sohu,'_blank');" href="javascript:void(0);"><img border="0" src="../images/sohu.jpg" width="25" height="23" style="cursor: pointer"/></a>
		<a title="分享至凤凰微博" onclick="javascript:window.open(_ifeng,'_blank');" href="javascript:void(0);"><img border="0" src="../images/ifeng.jpg" width="25" height="23" style="cursor: pointer"/></a>
		<a title="分享至百度贴吧" onclick="javascript:window.open(_tieba,'_blank');" href="javascript:void(0);"><img border="0" src="../images/tieba.jpg" width="71" height="23" style="cursor: pointer"/></a>
		<a title="分享至人人网" onclick="javascript:window.open(_renren,'_blank');" href="javascript:void(0);"><img border="0" src="../images/renren.jpg" width="28" height="23" style="cursor: pointer"/></a>
		<input type="hidden" id="painting_id" value="${painting.id}"/>
		<input type="hidden" id="painter_id" value="${painting.painter.id}"/>
	</p>
</div>


<form id="orderForm" name="orderForm" action="${ctx }/customer/order!orderPrepare.do" method="post">
	<input type="hidden" value="${requestScope.goods.id }" name="gId" id="gId"/>
	<input type="hidden" value="1" name="num" id="num"/>
</form>

<script type="text/javascript">
var _tencent = '';
var _sina ='';
var _sohu = '';
var _renren = '';
var _tieba = '';
var _ifeng = '';

function init_weibo(title_painting,imagepath){
	
    var _t =  title_painting+"分享自 @可观艺术网";
    _t = encodeURIComponent(_t);
	var _source = 1000001;
	var _site = encodeURIComponent('http://www.keguan100.com');
	var _pic = imagepath;
    var _url = window.location.href;
    if(_url.indexOf('#') >0 ){
        _url = encodeURIComponent(_url.substr(0,_url.indexOf('#')));
    }else{
        _url = encodeURIComponent(_url);
    }

    _tencent = 'http://v.t.qq.com/share/share.php?appkey=&title='+_t+'&url='+_url+'&site='+_site+'&pic='+_pic;

	 _sina ='http://v.t.sina.com.cn/share/share.php?appkey=&url='+_url+'&title='+_t+'&source='+_source+'&sourceUrl='+_site+'&content=utf8'+'&pic='+_pic;

	 _sohu = 'http://t.sohu.com/third/post.jsp?content=utf-8&url='+_url+'&title='+_t+'&pic='+_pic;

	 _renren = 'http://share.renren.com/share/buttonshare.do?link='+_url+'&title='+_t;
	 
	 _ifeng = "http://t.ifeng.com/?content="+_t;

	 _pic = encodeURIComponent(_pic);
	 _tieba = 'http://tieba.baidu.com/i/sys/share?title='+_t+'&type=picture&content='+_pic +'&link='+_url;
}

$(document).ready(function(){

		init(); //初始化图片列表
	
		var index = $(".imgsBox>div").index($(".cur_img"));
   		$(".preImg").hover(function(){
   			$(this).css({cursor:"pointer",filter:"alpha(opacity=50)",opacity:"0.50"});
			},function(){
				$(this).css({cursor:"pointer",filter:"alpha(opacity=100)",opacity:"1.0"});
			});	
		$(".nextImg").hover(function(){
			$(this).css({cursor:"pointer",filter:"alpha(opacity=50)",opacity:"0.50"});
			},function(){
				$(this).css({cursor:"pointer",filter:"alpha(opacity=100)",opacity:"1.0"});
			});
		$(".preBtn").hover(function(){
			$(this).css({cursor:"pointer"});
			});
		$(".nextBtn").hover(function(){
			$(this).css({cursor:"pointer"});
			});	
		$(".preBtn").click(function(){
					setZindex();				
					$(".imgsBox").animate({left:"+=228px"},300,"linear",checkPos);
		   });	
		$(".nextBtn").click(function(){
					setZindex();			
					$(".imgsBox").animate({left:"-=228px"},300,"linear",checkPos);//228px为两张图片的位置			
			});
		function checkPos(){
			//alert("callBack");
			if(parseInt($(".imgsBox").css("left"))>17){					
						$(".imgsBox").animate({left:"17px"},300);
					}
			if(parseInt($(".imgsBox").css("left"))<-(parseInt($(".imgsBox").css("width"))-584)){					
					$(".imgsBox").animate({left:-(parseInt($(".imgsBox").css("width")))+584+"px"},300);			
			}	
		}
		$(".imgsBox>div").click(function(){
				    index=$(".imgsBox>div").index($(this));
					$(".imgBox img").attr("src",$(this).find("div").attr("name"));
					showImg();
					requestDetailOfPainting(index);
					$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
					$(this).addClass("cur_img");
			});
		$(".preImg").click(function(){
					setZindex();
					if(index>0){
						index-=1;
					}
					$(".imgBox img").attr("src",$(".imgsBox>div").eq(index).find("div").attr("name"));
					showImg();
					requestDetailOfPainting(index);
					if(parseInt($(".imgsBox").css("left"))<17){					
						$(".imgsBox").animate({left:"+=114px"},300,"linear",checkPos);		
					}
					$(this).css({"z-index":"303"});
					$(".nextImg").css({"z-index":"304"});
					$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
					$(".imgsBox>div").eq(index).addClass("cur_img");
			});
		$(".nextImg").click(function(){
					setZindex();
					var totalLen = $(".imgsBox>div").length;
					if(index< totalLen-1 ){
						index+=1;
					}
					$(".imgBox img").attr("src",$(".imgsBox>div").eq(index).find("div").attr("name"));
					showImg();
					requestDetailOfPainting(index);
					if(parseInt($(".imgsBox").css("left"))>-(parseInt($(".imgsBox").css("width"))-584)){						
						$(".imgsBox").animate({left:"-=114px"},300,"linear",checkPos);			
					}
					$(".preImg").css({"z-index":"303"});
					$(this).css({"z-index":"304"});
					$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
					$(".imgsBox>div").eq(index).addClass("cur_img");
		});
		function setZindex(){
			$(".preBtn").css({"z-index":"300"});
			$(".nextBtn").css({"z-index":"301"});
		}
		function showImg(){
			$(".imgBox img").css({display:"none"});//先设置display为none，这样下面的渐变切换动画才会有效
			$(".imgBox img").fadeIn();	
		}
		});
</script>

<div style="padding-top: 20px;">
	<div style="width:100%;">
		  <div style="font-size:12px;width: 960px;text-align: center;margin: 0 auto;padding: 15px 0px 15px 0px;line-height: 22px;">
			  	<span><a href="${ctx }/about/about.jsp">网站简介</a></span>
			    <span style="margin-left: 50px;"><a href="${ctx }/about/contact.jsp">联系我们</a></span>
			    <span style="margin-left: 50px;"><a href="http://www.miibeian.gov.cn/" target="_blank">粤ICP备12002068号</a></span>
			    <span style="margin-left: 50px;"><a href="${ctx }/login.jsp">艺术品发布平台</a></span>
		</div>
	</div>
</div>

</body>
</html>
